<template class="container">
  <div class="container">
    <!--顶部操作表单-->
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
<!--      <el-form-item label="学院">
        <el-select v-model="listQuery.collegeId" :clearable="1===1" placeholder="请选择学院" @change="changeSelect">
          <el-option
            v-for="item in collegeOptions"
            :key="item.id"
            :label="item.collegeName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级">
        <el-select v-model="listQuery.classId" :clearable="1===1" placeholder="请选择班级">
          <el-option
            v-for="item in classOptions"
            :key="item.id"
            :label="item.className"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>-->
      <el-form-item label="创建人姓名">
        <el-input v-model="listQuery.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="创建人账号">
        <el-input v-model="listQuery.createUser" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item label="发起时间">
      <div style="display: inline-block">
        <el-date-picker
          v-model="listQuery.createDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>

    </el-form>
    <!--顶部操作表单-->
    <el-table
      :data="courseListData"
      border
      v-loading="loading"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="courseName"
        label="课程名"
        width="180">
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status==0">进行中</span>
          <span v-else>已结束</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="className"
        label="班级">
      </el-table-column>
      <el-table-column
        prop="createUserName"
        label="创建人">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" circle @click="handleDeleteClick(scope.row)"
                     title="删除"></el-button>
          <el-button type="warning" icon="el-icon-document" circle @click="handleClick(scope.row)"
                     title="查看信息"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--查看详情对话框-->
    <el-dialog
      title="签到详情"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose">
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="已经签到" name="first" :listSignQuery="listSignQuery">
          <signList :listSignQuery="listSignQuery" ref="sginListCall"></signList>
        </el-tab-pane>
        <el-tab-pane label="未签到" name="second" :listSignQuery="listSignQuery" >
          <notSignList :listSignQuery="listSignQuery" ref="notSginListCall"></notSignList>
        </el-tab-pane>
        <el-tab-pane label="图示" name="third" :listSignQuery="listSignQuery">
          <signGraphic :listSignQuery="listSignQuery" ref="signGraphicCall"/>
        </el-tab-pane>
      </el-tabs>

    </el-dialog>
    <!--分页-->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!--分页-->
  </div>
</template>

<script>
  import notSignList from "../sign/notSignList";
  import {delCourse, getCourseList} from "../../api/course";
  import signGraphic from "./signGraphic";
  import signList from "../sign/signList";
  import {geClassdropDownList, getCollegedropDownList} from "../../api/common";

  export default {
    name: "",
    components: {signList, signGraphic, notSignList},
    data() {
      return {
        loading:false,
        classOptions: [],
        collegeOptions: [],
        courseListData: [],
        activeName: 'first',
        total: 0,
        dialogVisible: false,
        listSignQuery:{
          courseCode: '',
          classId:''
        },
        listQuery: {
          page: 1,
          size: 5,
          collegeId: '',
          name: '',
          classId: '',
          createUser: '',
          createDate:null
        }
      }
    },
    methods: {
      //删除课程签到
      handleDeleteClick(param){
        this.loading=true
        delCourse({id:param.id}).then(res=>{
          this.$message.success("删除成功")
          this.getCourseListData()
          this.loading=false
        }).catch(err=>{
          this.loading=false
        })
      },
      //查询
      onSubmit() {
        this.listQuery.page = 1
        this.listQuery.size = 5
        this.getCourseListData(this.listQuery)
      },
      //获取学院列表
      getdropDownListForCollege() {
        getCollegedropDownList(1484744242220589057)
          .then(res => {
            console.log(res)
            this.collegeOptions = res.data
          })
      },
      changeSelect() {
        this.getdropDownListForClass()
      },
      //获取班级列表
      getdropDownListForClass() {
        geClassdropDownList(this.listQuery.collegeId)
          .then(res => {
            console.log(res)
            this.classOptions = res.data
          });
      },
      //打开对话框
      handleClick(param) {
        this.dialogVisible = true
        this.listSignQuery.courseCode = param.courseCode
        this.listSignQuery.classId=param.classId
        this.handleQueryAlreadySign(this.listSignQuery)
      },
      //查询已经签到
      handleQueryAlreadySign(param) {
        this.$nextTick(() => {
          this.$refs['sginListCall'].getSginListData(param)
        })
      },
      //查询未签到
      handleQueryNotSign(param) {
        this.$nextTick(() => {
          this.$refs['notSginListCall'].getNotSginListData(param)
        })
      },
      //调用echart
      handleSignEcharts(param) {
        this.$nextTick(() => {
          this.$refs['signGraphicCall'].getGraphicData(param)
          // this.$refs['signGraphicCall'].echartsInit()
        })
      },
      handleClose() {
        this.dialogVisible = false
      },
      //获取签到课程列表
      getCourseListData() {
        this.loading=true
        console.log(this.listQuery)
        getCourseList(this.listQuery).then(res => {

          if (res.code != 20000) {
            this.$message.error(res.msg)
            return
          }
          this.courseListData = res.data.pageList
          this.total = res.data.total
          this.loading=false
        })
      },
      //切换tab
      handleTabClick(tab, event) {
        console.log(tab, event);
        if (tab.index == '0') {
          this.handleQueryAlreadySign(tab.$attrs.listSignQuery)
        } else if (tab.index == '1') {
          this.handleQueryNotSign(tab.$attrs.listSignQuery)
          // this.handleSignEcharts()
        }else if(tab.index=='2'){
          this.handleSignEcharts(tab.$attrs.listSignQuery)
        }
      },
      //分页相关
      handleSizeChange(val) {
        this.listQuery.size = val
        this.getCourseListData()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getCourseListData()
        console.log(`当前页: ${val}`);
      },
    },
    created() {
      this.getCourseListData()
      this.getdropDownListForCollege()
    }
  }
</script>

<style scoped>
  .demo-form-inline {
    margin-top: 20px;
    margin-left: 10px;
  }
</style>
